<template>
  <div class="switch" ref="switch">
    <span class="selected" @click="change(0)">{{ firstButtonName }}</span>
    <span @click="change(1)">{{ SecondeButtonName }}</span>
    <div id="selected" ref="selected"></div>
  </div>
</template>
<script>
export default {
  name: "switchButton",
  props: {
    ButtonName: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      //按钮列表
      buttonsArray: [],
      //遮罩层
      cover: null,
      width:0
    };
  },
  methods: {
    change(index) {
      this.buttonsArray[index].className = "selected";
      this.buttonsArray[1 - index].className = "";
      let className = index ? "selectedR" : "selectedL";
      this.cover.className = className;
      this.$emit("change", index);
    },
  },
  computed: {
    firstButtonName() {
      return this.ButtonName[0];
    },
    SecondeButtonName() {
      return this.ButtonName[1];
    },
  },
  mounted() {
    this.buttonsArray = document.querySelectorAll(".switch span");
    this.cover = document.querySelector(".switch div");
    let rate = 19 * Math.max(this.ButtonName[0].length,this.ButtonName[1].length)
    console.log(rate);
    //动态CSS的使用方法
    this.$refs.switch.style.setProperty("--buttonWidth",`${rate * 2}px`)
    this.$refs.selected.style.setProperty("--coverWidth",`${rate +1}px`)
  },
};
</script>
<style lang="less" scoped>
.switch {
  position: relative;
  z-index: 1;
  height: 20px;
  line-height: 20px;
  color: #1989fa;
  border: 2px solid #1989fa;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  width: var(--buttonWidth);
  span {
    flex:1;
  }
  #selected {
    position: absolute;
    display: inline-block;
    left: -1px;
    //right: -1px;
    top: -1px;
    z-index: -1;
    background-color: #1989fa;
    width: var(--coverWidth);
    height: 22px;
  }
  .selected {
    color: #ffffff;
  }
}

.selectedR {
  animation: selectedMoveR 0.5s ease forwards;
  -moz-animation: selectedMoveR 0.5s ease forwards;
  -webkit-animation: selectedMoveR 0.5s ease forwards;
  -o-animation: selectedMoveR 0.5s ease forwards;
}
.selectedL {
  animation: selectedMoveL 0.5s ease forwards;
  -moz-animation: selectedMoveL 0.5s ease forwards;
  -webkit-animation: selectedMoveL 0.5s ease forwards;
  -o-animation: selectedMoveL 0.5s ease forwards;
}

@keyframes selectedMoveR {
  from {
    left: -1px;
  }
  to {
    left: var(--coverWidth);
  }
}

@-moz-keyframes selectedMoveR /* Firefox */ {
  from {
    left: -1px;
  }
  to {
    left: var(--coverWidth);
  }
}

@-webkit-keyframes selectedMoveR /* Safari 和 Chrome */ {
  from {
    left: -1px;
  }
  to {
    left: var(--coverWidth);
  }
}

@-o-keyframes selectedMoveR /* Opera */ {
  from {
    left: -1px;
  }
  to {
    left: var(--coverWidth);
  }
}

@keyframes selectedMoveL {
  from {
    left: var(--coverWidth);
  }
  to {
    left: -1px;
  }
}

@-moz-keyframes selectedMoveL /* Firefox */ {
  from {
    left: var(--coverWidth);
  }
  to {
    left: -1px;
  }
}

@-webkit-keyframes selectedMoveL /* Safari 和 Chrome */ {
  from {
    left: var(--coverWidth);
  }
  to {
    left: -1px;
  }
}

@-o-keyframes selectedMoveL /* Opera */ {
  from {
    left: var(--coverWidth);
  }
  to {
    left: -1px;
  }
}
</style>